<template>
	<div id="map"></div>
</template>

<script lang="js" setup>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import { XYZ } from 'ol/source';

const target = 'map'

const view = new View({
	// 南京地理位置
	center: [118.796877, 32.060255],
	zoom: 10,
	projection: 'EPSG:4326',
})

const layers = [
	new TileLayer({
		source: new XYZ({
			url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}`
		})
	})
]

onMounted(() => {
	new Map({
		target: target,
		layers: layers,
		view: view
	})
})
</script>